<div id="keyboard">
  <div class="nav">
    <span class="left" data-key="0"></span>
    <span class="top" data-key="1"></span>
    <span class="bottom" data-key="2"></span>
    <span class="right" data-key="3"></span>
    <span class="ok" data-key="4"></span>
    <span class="back" data-key="5"></span>
    <span class="home" data-key="6"></span>
    <span class="power" data-key="7"></span>
  </div>
  <div class="functions">
    <span data-key="12"></span>
    <span data-key="13"></span>
    <span data-key="14"></span>
    <span data-key="15"></span>
    <span data-key="16"></span>
    <span data-key="17"></span>
    <span data-key="18"></span>
    <span data-key="19"></span>
    <span data-key="20"></span>
    <span data-key="21"></span>
    <span data-key="22"></span>
    <span data-key="23"></span>
    <span data-key="24"></span>
    <span data-key="25"></span>
    <span data-key="26"></span>
    <span data-key="27"></span>
    <span data-key="28"></span>
    <span data-key="29"></span>
  </div>
  <div class="digits">
    <span data-key="30"></span>
    <span data-key="31"></span>
    <span data-key="32"></span>
    <span data-key="33"></span>
    <span data-key="34"></span>
    <span data-key="36"></span>
    <span data-key="37"></span>
    <span data-key="38"></span>
    <span data-key="39"></span>
    <span data-key="40"></span>
    <span data-key="42"></span>
    <span data-key="43"></span>
    <span data-key="44"></span>
    <span data-key="45"></span>
    <span data-key="46"></span>
    <span data-key="48"></span>
    <span data-key="49"></span>
    <span data-key="50"></span>
    <span data-key="51"></span>
    <span data-key="52"></span>
  </div>
</div>
